@page "/robot"
@using System.Collections

@inject HttpClient http

<div class="container border border-3 rounded">

    <div class="d-flex justify-content-center">
        <div class="col-md-3">
            <div class="form-group">
                <input type="button" class="btn btn-success" value="Robot Control Panel" />
            </div>
        </div>
    </div>
    <div class="row px-3 justify-content-center">
        <div class="col-lg-6 p-3">
            <RadzenCard>
                <h6>Speed Setting</h6>
                <RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text=@($"{String.Format("{0} cm/s",speed)}") style="font-size: large;" />
                <br>
                <RadzenSlider @bind-Value=@speed Min="0" Max="50" TValue="int" Step="5" Change=@(args => OnChange(args, "Speed"))
                    Class="w-100" />
            </RadzenCard>
        </div>
        <div class="col-lg-6 p-3">
            <RadzenCard>
                <h6>Time Setting</h6>
                <RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text=@($"{String.Format("{0} s",time)}") style="font-size: large;" />
                <br>
                <RadzenSlider @bind-Value=@time Min="0" Max="5" TValue="int" Step="1" Change=@(args => OnChange(args, "Time"))
                    Class="w-100" />
            </RadzenCard>
        </div>
    </div>
    <br>
    <div class="justify-content-center">
        <div class="d-flex justify-content-center" >
            <RadzenButton style="width: 180px; background-color:#6c41ff94; margin-right: 5px; margin-left:5px;" IsBusy=@busy Click=@TurnLeft
                Text="Turn Left" />
            <RadzenButton style="width: 180px; background-color:#6c41ffcf; margin-right: 5px; margin-left:5px;" IsBusy=@busy Click=@Forward
                Text="Forward" />
            <RadzenButton style="width: 180px; background-color:#6c41ff94; margin-right: 5px; margin-left:5px;" IsBusy=@busy Click=@TurnRight
                Text="Turn Right" />
        </div>
        <div class="justify-content-center">
            <img src="images/rover.png" alt="" style="display:block; margin:auto;" width="250" height="200">
        </div>
        <br>
@*         <div class="row justify-content-center">
                    <div class="column">
                        <img src="http://pi-top.local:8070/video.mjpg" alt="" style="display:block; margin:auto;" width="300" height="250" >
                    </div>
            </div> *@
        <br>
        <div class="d-flex justify-content-center">
            <RadzenButton style="width: 180px; background-color:#414bff94;  margin-right: 5px; margin-left:5px;" IsBusy=@busy Click=@ReverseLeft
                Text="Reverse Left" />
            <RadzenButton style="width: 180px; background-color:#414bffcf;  margin-right: 5px; margin-left:5px;" IsBusy=@busy Click=@Reverse
                Text="Reverse" />
            <RadzenButton style="width: 180px; background-color:#414bff94;  margin-right: 5px; margin-left:5px;" IsBusy=@busy Click=@ReverseRight
                Text="Reverse Right" />
        </div>
    </div>
<br>
</div>


@code {
    int speed = 0;
    int time = 0;

    DistanceModel distance = new DistanceModel();

    void OnChange(dynamic value, string name)
    {
        var str = value is IEnumerable ? string.Join(", ", value) : value;
        Console.WriteLine(str);
    }
    bool busy;
    protected async Task Forward()
    {
        distance.Speed = speed;
        distance.Time = time;
        busy = true;
        var result = await http.PostAsJsonAsync("/Robot/Forward", distance);
        busy = false;
    }
    protected async Task TurnRight()
    {
        distance.Speed = speed;
        distance.Time = time;
        busy = true;
        var result = await http.PostAsJsonAsync("/Robot/TurnRight", distance);
        busy = false;
    }
    protected async Task TurnLeft()
    {
        distance.Speed = speed;
        distance.Time = time;
        busy = true;
        var result = await http.PostAsJsonAsync("/Robot/TurnLeft", distance);
        busy = false;
    }
    protected async Task Reverse()
    {
        distance.Speed = speed;
        distance.Time = time;
        busy = true;
        var result = await http.PostAsJsonAsync("/Robot/Reverse", distance);
        busy = false;
    }
    protected async Task ReverseRight()
    {
        distance.Speed = speed;
        distance.Time = time;
        busy = true;
        var result = await http.PostAsJsonAsync("/Robot/ReverseRight", distance);
        busy = false;
    }
    protected async Task ReverseLeft()
    {
        distance.Speed = speed;
        distance.Time = time;
        busy = true;
        var result = await http.PostAsJsonAsync("/Robot/ReverseLeft", distance);
        busy = false;
    }

}